<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>生辰</title>
		<link rel="stylesheet" href="css/index.css" />
		<style>
			
			
		</style>
	</head>

	<body  >
		<div style="display: none;" 　　document.getElementById( "typediv1").style.display="none" ;>
			<img src="img/black_08.png">
		</div>
		<div class="content live">
			<img src="img/r1.png" class="Refresh" />
			<button class="screenshotBtn example1"><img src="img/scissors10.png" class="screenshotIcon "/></button>
			<!--<img  src="img/black_08.png" width="120" height="120" class="white_clock"/>-->
			<canvas id="clock" width="120" height="120" style="widows: 120px; height:  120px;">
			你的浏览器不支持canvas标签，无法看到时钟。
			</canvas>

			<p class="content_p">你出生</p>

			<!--<button id="demo1" class="btn11 ">选择日期</button>-->
			<button class="btn11 sp-time" id="selectDate_btn">选择日期</button>
			<!--<button class="btn11 example1">截图</button>-->
			<div class="time_table none">
				<p class="age_p">你 <span class="age_span"> </span> 岁了 </p>
				<p class="cunzai_p">在这个世界上，你已经存在了</p>
				<table class="table_css table_time">
					<!--<tr align="center">
					<td>22<br />年</td>
					<td>265<br />月</td>
					<td>1154<br />周</td>
				</tr>
				<tr align="center">
					<td>8082<br />天</td>
					<td>193970<br />小时</td>
					<td>11638231<br />分钟</td>
				</tr>-->
				</table>
				<div class="die_btn_div ">
					<button class=" die_btn ">死之钟</button>

				</div>
			</div>

		</div>
		<!--bottom-->
		<div class="content die none">
			<!--<img src="img/player_08.png" class="Refresh" />-->
			<button class="black screenshotBtn example1"><img src="img/Screenshot.png" class="screenshotIcon  Icon2"/></button>
			<canvas id="BlackClock" width="120 " height="120 " style="widows: 120px; height:  120px;">
	你的浏览器不支持canvas标签，无法看到时钟。
	</canvas>
			<div class="p1_div">
				<p class="p1">你猜测自己能活多少岁</p>
			</div>
			<div class="time_table disappear">

				<p class="p2 age_p p_none"> 这是你一生中的<span class="now_time"></span></p>
				<p class="p3 cunzai_p p_none">剩下的日子里， 你大约可以</p>
				<table class="table_css table_die">
					<!--<tr align="center">
					<td>22<br />年</td>
					<td>265<br />月</td>
					<td>1154<br />周</td>
				</tr>
				<tr align="center">
					<td>8082<br />天</td>
					<td>193970<br />小时</td>
					<td>11638231<br />分钟</td>
				</tr>-->
				</table>
			</div>

			<button class="selectAge_btn qu-year "> 选择年龄</button>
			<button class="live_btn  disappear">生之时</button>
		</div>
		<!--<img src="img/img11.png" class="yisi" width="100%"/>-->

		<div class="hide_div">

			<img id="loadImg" width="352" height="862" style="margin-bottom: 10px;" />
			<img id="cancel" src="img/cancel.png"/>
				<br />
			<button class="title">长按图片保存</button>
			
		</div>

	<script type="text/javascript" src="js/jquery-1.10.0.js"></script>

	<script type="text/javascript " src="js/getTime.js "></script>
	<script type="text/javascript" src="js/jquery.selector-px.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	<script type="text/javascript" src="js/html2canvas.js"></script>
	<script type="text/javascript" src="js/weixin1.0.js"></script>
	<script>
		var getPixRatio = function(context) {
			var backingStoreRatio = cxt.webkitBackingStorePixelRatio ||
				cxt.mozBackingStorePixelRatio ||
				cxt.msBackingStorePixelRatio ||
				cxt.oBackingStorePixelRatio ||
				cxt.backingStorePixelRatio || 1;

			return(window.devicePixelRatio || 1) / backingStoreRatio
		}

		$('.Refresh').click(function() {
			window.location.reload();
		})
		//canvas截图
		
	
		$(".example1").on("click", function(event) {
			event.preventDefault();
		
			var canvas = document.createElement('canvas');
			var context = canvas.getContext('2d');
			var scaleBy = getPixRatio(context);
			var w =  window.screen.width;
			var h = window.screen.height;
			canvas.width = w* scaleBy;
			canvas.height = h* scaleBy;
			canvas.style.width =w+ 'px';
			canvas.style.height = h + 'px';
			context.scale(scaleBy, scaleBy);
			
			log("scaleBy: " +scaleBy);
			log("w: "+w);
			log('h: '+h);
			log("canas.height: "+canvas.height)
			log("canas.width: "+canvas.width)
			log("canvas.style.height "+canvas.style.height)
			log("canvas.style.w  "+canvas.style.width);
	
			html2canvas(document.body, {
 				canvas:canvas,
//				scale:0.5,
//				dpi:120,
				allowTaint: true,
				taintTest: false,
//				canvas:canvas,
				onrendered: function(canvas) {
				
					canvas.id = "mycanvas";
					
//					document.querySelector('.hide_div').appendChild(canvas);
					//生成base64图片数据
					var dataUrl = canvas.toDataURL();
					var newImg = document.createElement("img");
					newImg.src = dataUrl;
					
					//					document.body.appendChild(newImg);
					hecheng(dataUrl);
					$('.hide_div').css('display', 'block');
			}, 	
			});

		});
		
		$('#cancel').click(function(){
			base64.splice(0,base64.length);
			document.getElementById("loadImg").src="";
			$('.hide_div').css('display', 'none');
			
		})
		
	</script>
	<script>
		//拼接图片
		//		function hecheng() {
		//			draw(function() {
		//				document.getElementById('imgBox').innerHTML = '<p style="padding:10px 0">合成图片成功！可以鼠标另存图片查看我是否是一张图片~~！</p><img src="' + base64[0] + '">';
		//			})
		//		}
		function hecheng(dataUrl) {
			data[0] = dataUrl;
			draw(function() {
				//				document.getElementById('loadImg').src = '<p style="padding:10px 0">合成图片成功！可以鼠标另存图片查看我是否是一张图片~~！</p><img src="' + base64[0] + '">';
				document.getElementById('loadImg').src = base64[0];

			})
		}

		var data = ['', 'img/img11.png'],
			base64 = [];

		function draw(fn) {
			var c = document.createElement('canvas'),
				ctx = c.getContext('2d'),
				len = data.length;
			c.width = window.screen.width;
			c.height = window.screen.height;

			// 屏幕的设备像素比
			var devicePixelRatio = window.devicePixelRatio || 1;

			// 浏览器在渲染canvas之前存储画布信息的像素比
			var backingStoreRatio = cxt.webkitBackingStorePixelRatio ||
				cxt.mozBackingStorePixelRatio ||
				cxt.msBackingStorePixelRatio ||
				cxt.oBackingStorePixelRatio ||
				cxt.backingStorePixelRatio || 1;

			// canvas的实际渲染倍率
			var ratio = devicePixelRatio / backingStoreRatio;
			c.style.width = c.width;
			c.style.height = c.height;

			c.width = c.width * ratio;
			c.height = c.height * ratio;

			ctx.rect(0, 0, c.width, c.height);
			ctx.fillStyle = '#fff';
			ctx.fill();

			function drawing(n) {
				if(n < len) {
					var img = new Image;
					//img.crossOrigin = 'Anonymous'; //解决跨域

					img.src = data[n];
					img.onload = function() {
						if(n == 1) {
							ctx.drawImage(img, 0, c.height - img.height * 0.7 * ratio, c.width, img.height * 0.7 * ratio);
							console.log(ratio);
						} else {
							//								ctx.drawImage(img, 0, 160, c.width, c.height);
							ctx.drawImage(img, 0, 0, img.width * ratio, img.height * ratio);
						}

						drawing(n + 1); //递归
					}
				} else {
					//保存生成作品图片
					base64.push(c.toDataURL("image/jpeg", 0.8));
					//alert(JSON.stringify(base64));
					fn();
				}
			}
			drawing(0);
		}
	</script>
	<script>
		//隐藏分享接口
		wx.config({

			jsApiList: [

				'hideOptionMenu',
			]

		});

		wx.hideOptionMenu();

		document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
			// 通过下面这个API隐藏右上角按钮
			WeixinJSBridge.call('hideOptionMenu');
		});
	</script>
	
	<script src="js/clock.js"></script>

</html>